<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

    <meta content="旧书,二手书,二手教材,旧教材,校园书籍,校园旧书，旧书网" name="keywords">
    <meta content="买卖二手书，就上旧书街" name="description">
    <meta content="zh" name="language">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <link href="res/form.css" rel="stylesheet" type="text/css">
    <link href="res/ubm_basic.css" rel="stylesheet" type="text/css">
    <link href="http://cdnfile.jiushujie.com/images/ubm.ico"
          rel="shortcut icon" type="image/x-icon">

    <title>买卖二手书,就上旧书街</title>
</head>
<body>
<div th:replace="index::div#header"></div>

<div style="border-bottom: 1px solid rgb(255, 255, 255);"></div>
<div style="position: fixed; top: 122px; right: 20px;">
    <img src="res/ios_download.jpg"
         style="width: 120px; margin-bottom: 10px;"><br> <img
        src="res/android_download.jpg"
        style="width: 120px; margin-bottom: 10px;">
</div>
<div class="clearfloat"></div>
<div id="add">
    <el-upload :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            action="https://jsonplaceholder.typicode.com/posts/"
            class="avatar-uploader"
            style="" >
        <img :src="imageUrl" class="avatar" v-if="imageUrl" >
        <i class="el-icon-plus avatar-uploader-icon" v-else></i>
    </el-upload>
    <el-form :model="form" label-width="80px" ref="form">

        <el-form-item label="书籍名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="书籍类型">
            <el-select placeholder="请选择活动区域" v-model="form.region">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker placeholder="选择日期" style="width: 100%;" type="date" v-model="form.date1"></el-date-picker>
            </el-col>
            <el-col :span="2" class="line">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" style="width: 100%;" v-model="form.date2"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="onSubmit" type="primary">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>


    <script>
        var  v=new Vue({
           el:"#add",
                data() {
                    return {imageUrl: '',
                        form: {
                            name: '',
                            region: '',
                            date1: '',
                            date2: '',
                            delivery: false,
                            type: [],
                            resource: '',
                            desc: '',

                        }
                    }
                },
                methods: {
                    handleAvatarSuccess(res, file) {
                        this.imageUrl = URL.createObjectURL(file.raw);
                    },
                    beforeAvatarUpload(file) {
                        const isJPG = file.type === 'image/jpeg';
                        const isLt2M = file.size / 1024 / 1024 < 2;

                        if (!isJPG) {
                            this.$message.error('上传头像图片只能是 JPG 格式!');
                        }
                        if (!isLt2M) {
                            this.$message.error('上传头像图片大小不能超过 2MB!');
                        }
                        return isJPG && isLt2M;
                    },
                    onSubmit() {

                        console.log('submit!');

                    }
                }
            }

        )

    </script>
</div>
<div th:replace="index::div.bottom"></div>
<h1 class="jiushujie_slogan">买卖二手书，就上旧书街。旧书街二手书交易网-您身边的旧书网站</h1>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</body>
</html>